<template>
	<view class="content">
		<!-- 卡片 -->
		<view class="caa tn-radius detaill">

			<view class="detaill-top">
				<text class="tn-icon-location"></text>
				<view>
					张先生 <text> 1835669517</text>
					<view>安徽省芜湖市弋江区芜石路143号</view>
				</view>
			</view>
			<view class="tn-height-nim"></view>
			<view class="detaill-buttom">
				<view class="bottom-item">
					<text class="tn-icon-tel-circle-fill" @click="ringup"></text>
					电话联系
				</view>
				<view class="bottom-item" @click="gotomap">
					<image src="http://anmo.zjlhfdc.com/shifu/static/img/location.5cd0e429.png" mode=""></image>
					地图导航
				</view>
			</view>


		</view>

		<view class="caa tn-radius">
			<view class="detaill-title">
				<text class="tn-icon-title"></text>预约项目
			</view>
			<view class="detaill-item">
				<view class="deraill-inif">


					<image src="https://ui.yunchencloud.cn/anmo/static/image/project/project-1.jpg" mode=""></image>
					<view class="project">
						<view class="proBox">
							<view class="nameandtime">
								舒适采耳
							</view>
							<view class="nameandright">
								60分钟
							</view>
						</view>
						<view class="proBox two">
							<view class="nameandright">
								聪耳名目 舒缓神经
							</view>

						</view>
						<view class="proBox">
							<view class="nameandtime price">
								￥98.00
							</view>
							<view class="nameandright">
								x1
							</view>
						</view>
					</view>
				</view>
				<view class="tn-height-nim"></view>
				<view class="deraill-offset">
					<tn-button class="one" size="sm" shape="round" backgroundColor="tn-main-gradient-orange"
						fontColor="tn-color-white">延长时间</tn-button>
					<tn-button size="sm" shape="round" backgroundColor="tn-main-gradient-teal"
						fontColor="tn-color-white">服务完成</tn-button>

				</view>
			</view>




		</view>



		<view class="box-con">
			<view class="box">
				<view class="box-son">
					<view class="box-s-1">
						<text class="tn-icon-title"></text>
						订单明细
					</view>
					<view>
						<text>项目金额</text>
						<text>￥199.00</text>
					</view>
					<view>
						<text>延长金额</text>
						<text>￥899.00</text>
					</view>
					<view>
						<text>出行费用</text>
						<text>￥23.90</text>
					</view>
					<view>
						<text>车费详情</text>
						<view>
							<text style="margin-right: 6rpx;" class="tn-text-bold">拖拉机</text>
							<text>全程23km</text>
						</view>
					</view>
					<view>
						<text>支付方式</text>
						<view class="vatical">
							<text class="tn-icon-money-fill"></text>
							<text class="tn-text-bold">余额支付</text>
						</view>
					</view>
					<view>
						<text class="tn-text-bold">支付金额</text>
						<text style="color: red;">￥637.80</text>
					</view>
				</view>
				<view class="box-son">
					<view class="box-s-1">
						<text class="tn-icon-title"></text>
						订单详情
					</view>
					<view>
						<text>服务技师</text>
						<view class="img">
							<image src="https://ui.yunchencloud.cn/shifuduanv3/static/info-2.jpg" mode=""></image>
							<text>萧瑟</text>
						</view>
					</view>
					<view>
						<text>订单编号</text>
						<text>20230919183353232123</text>
					</view>
					<view>
						<text>预约时间</text>
						<text>01-10 09:00</text>
					</view>
					<view>
						<text>订单备注</text>
						<text>快点</text>
					</view>
				</view>
			</view>
		</view>

		<Loading v-if="pageLoading"/>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				// 滚动消息
				pageLoading:true,
			}
		},
		onLoad() {
			setTimeout(p=>{
			this.pageLoading = false	
			},500)

		},
		methods: {
			ringup(){
				// 拨打电话
				uni.makePhoneCall({
					phoneNumber: '1835669517' //仅为示例
				});
			},
			gotomap(){
			
				     uni.openLocation({
				       latitude: 31.300892, // 目标地点的纬度，浮点数，范围为-90~90
				       longitude: 118.386849, // 目标地点的经度，浮点数，范围为-180~180
				       scale: 12, // 缩放比例，范围5~18
				       name: '江南春城', // 位置名
				       address: '芜湖市弋江区芜石路143号', // 地址的详细说明
				       success() {
				         console.log('导航启动成功');
				       },
				       fail(error) {
				         console.log('导航启动失败', error);
				       }
				     });
				   }
			

		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		}
	}
</script>

<style scoped lang="scss">
	.caa {
		background: white;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx 0 #cfcfcf;
	}

	.detaill-buttom {
		display: flex;
		justify-content: space-evenly;


	}

	.detaill-top {
		display: flex;
		align-items: center;

		.tn-icon-location {
			font-size: 40rpx;
			margin-right: 20rpx;
		}
	}

	.bottom-item {
		padding-top: 10rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 50%;
		justify-content: center;
		border-left: 1px solid #f2f2f2;

		&:first-child {
			border: 0;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}

		.tn-icon-tel-circle-fill {
			font-size: 60rpx;
			margin-right: 10rpx;
		}
	}

	.detaill-title {
		line-height: 1;
	}

	.tn-icon-title {
		color: #0ab27d;
		font-weight: bold;
		font-size: 36rpx;
	}

	.deraill-inif {
		display: flex;
		margin-top: 30rpx;
		padding-bottom: 10rpx;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 24rpx;
			margin-right: 20rpx;
		}

		.project {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.proBox {
				display: flex;
				justify-content: space-between;

				.nameandtime {
					font-weight: bold;

				}

				.nameandright {
					color: #aaaaaa;
					font-size: 26rpx;
				}

				.price {
					color: #e54d42;
				}
			}

			.two {
				margin-bottom: 20rpx;
			}
		}



	}

	.deraill-offset {
		.one {
			margin-right: 10rpx;
		}

		display: flex;
		justify-content: flex-end;
		padding: 10rpx 0;
	}

	.box {
		display: flex;
		flex-direction: column;

		gap: 40rpx;
		box-sizing: border-box;
	}

	.box-son {
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx 0 #cfcfcf;
		    line-height: 1.5;
			
	}

	.box-son>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box-son .box-s-1 {
		justify-content: flex-start;
		font-size: 1.125rem;
		padding: 0 0 10rpx 10rpx;
		box-sizing: border-box;
	}

	.tn-icon-title {
		font-weight: 900;
		color: #0ab28c;
	}

	.tn-icon-money-fill {
		color: #ffa937;
		font-size: 1.5rem;
	}

	.vatical {
		display: flex;
		align-items: center;
		gap: 6rpx;
	}

	.img {
		display: flex;
		gap: 10rpx;
		align-items: center;
	}

	.img image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;

	}
</style>